<template>
  <f7-page>
    <f7-navbar :title="$t('m.fp1')" back-link=" "></f7-navbar>
    <div class="content-padding">
      <custom-input type="tel" :placeholder="$t('m.fp2')" v-model="formItems.phone"></custom-input>
      <custom-input v-model="formItems.code" :placeholder="$t('m.fp3')" button :send-status="smsStatus" @send-sms="handleSendSms"></custom-input>
      <custom-input type="password" :placeholder="$t('m.fp4')" v-model="formItems.pwd"></custom-input>
      <custom-input type="password" :placeholder="$t('m.fp5')" v-model="formItems.repwd"></custom-input>
      <f7-button fill color="blue" large @click="handleForget">{{$t('m.submit')}}</f7-button>
    </div>
  </f7-page>
</template>

<script>
  import {sendPhoneCode} from "../api";
  import { forgetPassword } from "../api/login";

  export default {
    name: "forget-pwd-one",
    data() {
      return {
        smsStatus: false,
        formItems: {
          phone: '',
          code: '',
          pwd: '',
          repwd: ''
        }
      }
    },
    methods: {
      handleSendSms() {
        sendPhoneCode({ phone: this.formItems.phone, type: 3}).then(() => {
          this.smsStatus = true;
        })
      },
      handleForget() {
        forgetPassword(this.formItems).then(() => {
          this.$f7router.back();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: $padding20;
  }
</style>
